<template>
	<view>
		
		<view class="over-head">
			<view class="over-circular" >
				<tui-circular-progress 
				progressColor="#4aba04" 
				fontColor="#191919" 
				:percentage="practicelist.scale" 
				:diam="150" 
				:lineWidth="10"
				fontSize="30rpx"
				
				>
				</tui-circular-progress>
				<view class="circular-progress">
					
					<text >{{practicelist.scale}}<text style="font-size:35rpx;">%</text></text>
					<text  style="font-size: 30rpx;color: gray;">正确率</text>
				</view>
				<text style="display: none;">答题用时{{use_time}}</text>
			</view>
			<view class="over-ti">
				<view>
					<text>正确总数</text>
					<text>{{practicelist.right_num}}题</text>
				</view>
				<view>
					<text>错题总数</text>
					<text>{{practicelist.error_num}}题</text>
				</view>
				<view>
					<text>未做题数</text>
					<text>{{practicelist.no_num}}题</text>
				</view>
			</view>
		</view>
		<view class="over-qk">
			<view>
				答题情况
			</view>
			<view>
				<view>
					<tui-badge dot type="gray"></tui-badge>
					<text>未答</text>
				</view>
				<view>
					<tui-badge dot type="green"></tui-badge>
					<text>答对</text>
				</view>
				<view>
					<tui-badge dot type="danger"></tui-badge>
					<text>答错</text>
				</view>
			</view>
		</view>
		
		
			<view  style="display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    flex-direction: row;">
				<!--  @tap="$openrul('/src/pages/mine/notice/noticeDetail/index?id=' + item.id)" question_detail  @tap="$openrul('/pages/examination/examOver/detail?id=' + sonitem.id + '&exam_user_id='+pages_params.examlog_id)"--> 
				<view class="number_yuan" v-for="(item, index) in questionList" :key="index" @tap="$openrul('/pages/examination/examOver/detail?id=' + item.id + '&exam_user_id='+pages_params.examlog_id)">
					<view v-if="item.state==1" style="background:#ff6b6a ;color:#fff">
						{{index+1}}
					</view>
					<view v-else-if="item.state==2" style="background:#44c4ad;color:#fff">
						{{index+1}}
					</view>
					<view v-else-if="item.state==4" style="background:#789ffe;color:#fff">
						{{index+1}}
					</view>
					<view v-else style="background:#efefef;color:#000">
						{{index+1}}
					</view>
				</view>
				 
				 
			</view>
	
		
		 <view class="over-bom">
			<view @tap="$openrul('/pagesa/my/wrongQuestion/detail?id=' + practicelist.unit_id+'&from_type=1')">
				<image  src="../../../static/img/ct.png"></image>
				本次错题
			</view>
			<view>
				<image @click="goto_jiexi(1)" src="../../../static/img/jx.png"></image>
				本次解析
			</view>
			<view  @tap="$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + practicelist.unit_id + '&from_type=1')" class="over-btn">
				重新做题
			</view>
		</view>
	</view>
</template> 

<script>

import tuiBadge from "@/pagesa/components/thorui/tui-badge/tui-badge"
import tuiCircularProgress from "@/pagesa/components/thorui/tui-circular-progress/tui-circular-progress"
export default {
	data(){
		return {
			pages_params: {},
			 timu_list: [],
			 list:[],
			 practicelist:[],
			 id:'',
			 scale:'',
			 pages_paramsover: {},
			 questionList:[],
			 show_beiti : true,
			 answer_type : 1,
			 is_last:1,
			 total_num:'',
			 arr:[],
		}
	},
	computed:{
		
		use_time() {
			let start = this.pages_params.start_time || 0
			let end = (new Date()).getTime()
			let sec = parseInt((end -start) / 1000);
			let hour = parseInt(sec / 3600);
			let miu = parseInt((sec - hour * 3600) / 60);
			let s = sec - hour * 3600 - miu * 60;
			// formatDigit
			hour = this.$myUtils.$common.formatDigit(hour)
			miu = this.$myUtils.$common.formatDigit(miu)
			s = this.$myUtils.$common.formatDigit(s)
			return `${hour}:${miu}:${s}`
		}
		
	},
	components:{
			tuiCircularProgress,
			tuiBadge,
			
		},
		
	onLoad(opts) {
		this.pages_params = opts;
		
		this.id=opts.id
		this.name=opts.name
		//this.is_last=opts.is_last
		this.total_num=opts.total_num
		
		var zhengqvelv = (this.pages_params.right_num/this.pages_params.total_num)*100
		
		
		if(isNaN(zhengqvelv)){
			
			this.pages_params.zhengquelv=parseInt(opts.scale).toFixed(0)
			
		}else{
			
			this.pages_params.zhengquelv = parseInt(zhengqvelv).toFixed(0)
			
		}
		
		
		
		//this.id = opts.id
		
		this.pages_paramsover = this.$myCatch.getItem("post_answer_req")
		
  },
  onShow(){
	  this.get_practice()
  },
  
  methods: {
	  navigateBack(){
		  uni.navigateBack(2);
		  
	  },
    goto_detail(type) {
			if (type === 2) {
				this.$openrul('/src/pages/mine/learn/wrongQuestion/list?unit_id='+this.pages_params.unit_id);
			} else {
        this.$openrul('/src/pages/mine/learn/collect/list?unit_id='+this.pages_params.unit_id)
			}
		},
		/*刷新上一页*/
		// gotoPre:function(){
		// 	let pages = getCurrentPages()
		// 	let prePage= pages[pages.length-2]
		// 	prePage.$vm.reFresh=Math.random()
		// 	uni.navigateBack(2);
		// },
		/*练习情况*/
		async get_practice(){
			let res = await this.$myHttp.post({
			    url: this.$myHttp.urlMap.studyReport,
			    data: {
			        unit_id:this.id,
			    },
			})
			if (res.code == 1) {
			    this.practicelist = res.data.studyInfo
				this.questionList=res.data.questionList
			}
		},
		goto_jiexi(type){
			
			if (type == '1') {
			    if (this.is_last == 0) {
			        //非终极栏目，点击进入下级栏目
			        this.$openrul('/pagesa/questionBank/detail/index?id=' + this.id + '&from_type=1' + '&name=' + this.name+ '&total_num=' + this.total_num+ '&is_last=' + this.is_last)
			    } else if (this.is_last == 1) {
			        if (this.$myUserLogin.getToken()) {
			            //终极栏目，点击进入答题页
			            this.$openrul('/pagesa/questionBank/questionBankAnswer/analysis?id=' + this.id + '&from_type=1' + '&name=' + this.name+ '&total_num=' + this.total_num+ '&is_last=1')
			        } else {
			            Error.errorNotLoggedIn();
			        }
			    }
			} else if (type == '2') {
			    if (this.$myUserLogin.getToken()) {
			        //历年真题都是终极栏目，点击进入答题页
			        //终极栏目，点击进入答题页
			        this.$openrul('/pagesa/questionBank/questionBankAnswer/analysis?id=' + this.id + '&from_type=2' + '&name=' + this.name+ '&total_num=' + this.total_num+ '&is_last=1')
			    } else {
			        Error.errorNotLoggedIn();
			    }
			}
		},
		
  }
};
</script>

<style>
.over-head{
	display: flex;
	flex-flow: row nowrap;
	width: 90%;
	justify-content: space-around;
	align-items: center;
	margin: 30rpx 0;
	font-size: 25rpx;
	
}
.over-circular{
	display: flex;
	flex-flow: column wrap;
	
}
.over-circular>text{
	margin-top: 20rpx;
	color: gray;
	text-align: center;
}
.over-ti{
	display: flex;
	font-size: 30rpx;
	flex-flow: column wrap;
}
.over-ti>view{
	margin-top: 20rpx;
	
}
.over-ti>view>text:nth-child(1){
	color: gray;
}

.over-ti>view>text:nth-child(2){
	margin-left: 20rpx;
	font-size: 30rpx;
	font-weight: 700;
}
	
.over-qk{
	    display: flex;
	    flex-flow: row nowrap;
	    width: 92%;
	    justify-content: space-between;
	    align-items: center;
	    margin: auto;
	    margin-top: 50rpx;
	
}
.over-qk>view>view{
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    width: 75rpx;
	    justify-content: space-between;
	
}
.over-qk>view:nth-child(2){
		display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-around;
	    align-items: center;
	    width: 50%;
	    font-size: 25rpx;
	    color: gray;
}
.over-bom{
	position:fixed;
	bottom: 0px;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-flow: row nowrap;
	background-color: #ffffff;
	border-top: 1rpx #f5f5f5 solid ;
	
}
.over-bom>view{
	display: flex;
	flex-flow: column wrap;
	font-size: 20rpx;
	justify-content: center;
	align-items: center;
}
.over-bom>view:nth-child(2){
	    margin-left: -60rpx;
}
.over-bom>view>image{
	    width: 50rpx;
	    height: 50rpx;
}
.over-bom>.over-btn{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    padding: 0px;
	    background-color: #34baf9;
	    border-radius: 25px;
	    color: white;
	    width: 130px;
	    font-size: 18px;
	    height: 75rpx;
	    margin-right: 30rpx;
	
}
.tika-content {
        width: 100%;
    }
.tika-content-n {
	    float: left;
	    text-align: center;
	    width: 36px;
	    height: 36px;
	    border: solid 1px #eee;
	    border-radius: 50%;
	    margin: 7px;
	    line-height: 36px;
	    font-size: 15px;
	}
.yejian .tika-content-n {
	    border: solid 1px #626262;
	}
	
page {
	background: #fff;
}
/*练习报告*/
.kaoshi-question-over {
	background: #fff;
}
.kaoshi-question-over-content {
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: space-between;
	font-size: 16px;
	color: #9a9a9a;
}
.kaoshi-question-over-content-flex {
	flex: 1;
	text-align: center;
}
.question-over-content .kaoshi-question-over-content-flex:first-child {
	border-right: solid 1px #f5f5f5;
}
.kaoshi-question-over-content-time {
	color: #000;
	font-size: 20px;
	padding-top: 4px;
}
.kaoshi-question-over-content-num {
	font-size: 16px;
	padding-top: 4px;
	display: flex;
	align-items: baseline;
	justify-content: center;
}
.question-over-content-num span {
	color: #000;
	font-size: 20px;
}
.kaoshi-baogao{
	background: url() no-repeat;
	background-size: contain;
	width: 180px !important;
	height: 180px;
	margin: 33px auto;
	text-align: center;
	color: #000;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.kaoshi-baogao-title{
    padding-top: 32%;
	display: flex;
	align-items: baseline;
}
.kaoshi-baogao-title-l{
	font-size: 32px;
}
.circular-progress{
	    display: flex;
	    flex-flow: column wrap;
	    justify-content: center;
	    align-items: center;
	    position: absolute;
	           top: 90rpx;
	           left: 120rpx;
	           width: 160rpx;
	    
}
.circular-progress>text:nth-child(1){
	font-size: 80rpx;
	font-weight: 700;
	margin-bottom: 10rpx;
}
.number_yuan{
	 width: 80rpx;
	     height: 80rpx;
	     border-radius: 50rpx;
	     display: flex;
	     align-items: center;
	     margin: 20rpx;
}
.number_yuan>view{
		width: 100%;
		    height: 100%;
		    border-radius: 50rpx;
		    margin: 30;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		
}



</style>

